<template>
  <div class="container">
    <van-nav-bar title="发现" >
      <template #right>
        <van-icon name="plus" size="22" @click="onAddClick"/>
      </template>
    </van-nav-bar>

    <div class="box">
      <div class="item">
        <div class="top">
          <div class="avatar">
            <div class="image">
              <img src="/assets/images/avatar.png" />
            </div>
            <div class="name">官方实体号分享</div>
          </div>
          <div class="follow">
            <van-button type="primary" icon="plus" size="small" color="#7232dd">关注</van-button>
          </div>
        </div>
        
        <div class="title">最近入手一件超可爱的毛衣外套！质感柔软，亲肤，但又不会软踏踏，也太舒服了吧！衣...</div>

        <div class="thumbs">
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
        </div>

        <div class="product">
          <div class="left">
            <img src="/assets/images/6.jpg" />
          </div>
          <div class="right">
            <div class="name">针织衫春秋季新款女装毛衣2020春温柔风黑色长袖短款上衣开衫外套</div>
            <div class="price">￥22.00</div>
          </div>
        </div>

        <div class="action">
          <div class="left">2024-07-30</div>
          <div class="right">
            <div class="item">
              <van-icon name="like-o" />
              <span>214</span>
            </div>
            <div class="item">
              <van-icon name="chat-o" />
              <span>179</span>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="top">
          <div class="avatar">
            <div class="image">
              <img src="/assets/images/avatar.png" />
            </div>
            <div class="name">官方实体号分享</div>
          </div>
          <div class="follow">
            <van-button type="primary" icon="plus" size="small" color="#7232dd">关注</van-button>
          </div>
        </div>
        
        <div class="title">最近入手一件超可爱的毛衣外套！质感柔软，亲肤，但又不会软踏踏，也太舒服了吧！衣...</div>

        <div class="thumbs">
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
        </div>

        <div class="product">
          <div class="left">
            <img src="/assets/images/6.jpg" />
          </div>
          <div class="right">
            <div class="name">针织衫春秋季新款女装毛衣2020春温柔风黑色长袖短款上衣开衫外套</div>
            <div class="price">￥22.00</div>
          </div>
        </div>

        <div class="action">
          <div class="left">2024-07-30</div>
          <div class="right">
            <div class="item">
              <van-icon name="like-o" />
              <span>214</span>
            </div>
            <div class="item">
              <van-icon name="chat-o" />
              <span>179</span>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="top">
          <div class="avatar">
            <div class="image">
              <img src="/assets/images/avatar.png" />
            </div>
            <div class="name">官方实体号分享</div>
          </div>
          <div class="follow">
            <van-button type="primary" icon="plus" size="small" color="#7232dd">关注</van-button>
          </div>
        </div>
        
        <div class="title">最近入手一件超可爱的毛衣外套！质感柔软，亲肤，但又不会软踏踏，也太舒服了吧！衣...</div>

        <div class="thumbs">
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
          <div class="image">
            <img src="/assets/images/5.jpg" />
          </div>
        </div>

        <div class="product">
          <div class="left">
            <img src="/assets/images/6.jpg" />
          </div>
          <div class="right">
            <div class="name">针织衫春秋季新款女装毛衣2020春温柔风黑色长袖短款上衣开衫外套</div>
            <div class="price">￥22.00</div>
          </div>
        </div>

        <div class="action">
          <div class="left">2024-07-30</div>
          <div class="right">
            <div class="item">
              <van-icon name="like-o" />
              <span>214</span>
            </div>
            <div class="item">
              <van-icon name="chat-o" />
              <span>179</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <van-back-top right="5vw" bottom="10vh" />

    <!-- 底部右下角的加号按钮 -->
    <!-- <van-button
      class="floating-button"
      icon="plus"
      type="warning"
      @click="onAddClick"
    /> -->
  </div>

  <Tabbar />
</template>

<script setup>
const {proxy} = getCurrentInstance()
const onAddClick = () => {
  proxy.$router.push('/shareadd')
  console.log("加号按钮被点击");
}
</script>

<style scoped>
  @import url('/assets/css/share.css');

  /* 设置加号按钮的位置，右下角浮动 */
  .floating-button {
    position: fixed;
    right: 16px;
    bottom: 100px;
    z-index: 1000;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7; /* 设置半透明 */
    transition: opacity 0.3s; /* 鼠标悬停时过渡效果 */
  }
</style>